<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css">

    <style>
        .layui-table tr {
            height: 50px;
        }


        body {
            padding: 10px;
        }

        .content {
            background-color: #fff;
            padding: 10px;
        }

        .sousuo {
            display: inline-block;
            width: 200px;
        }

        .btn {
            margin-right: 10px;
        }

        .layui-icon {
            vertical-align: middle;
            font-size: 20px;
            margin-left: 5px;
        }

        .layui-btn {
            height: 30px;
            line-height: 30px;
        }

        .layui-form-switch {
            border: 1px solid #ec4141;
            background-color: #ec4141;
        }

        .layui-form-switch i {
            background-color: #fff;
        }

        .layui-form-onswitch {
            border-color: #5FB878;
            background-color: #5FB878;
        }

        .layui-form-switch em {
            color: #fff !important;
        }

        .input {
            width: 107px;
            border: 0px;
            background-color: transparent;
        }

        .layui-form-label,
        .layui-form-mid,
        .layui-form-select,
        .layui-input-block,
        .layui-input-inline,
        .layui-textarea {
            width: 200px;
            display: inline-block;
        }

        form {
            display: contents;
        }

        .layui-form-label {
            width: 80px;
        }
    </style>
</head>

<body>
    <!-- 上传文件弹窗 -->
    <div id="file_upload_div" style="display: none" class="text-center">
        <div class="layui-upload-drag" id="test10" style="margin-left: 28%;margin-bottom: 30px;margin-top: 25px;">
            <i class="layui-icon"></i>
            <p>点击上传，或将文件拖拽到此处</p>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文件名:</label>
            <div class="layui-input-block" style="width: 400px;">
                <input type="text" name="title" id="file_name" required lay-verify="required" placeholder="请输入文件名"
                    autocomplete="off" class="layui-input" width="80%">
            </div>
        </div>
        <div class="layui-progress layui-progress-big" style="width: 80%;margin: auto;" lay-showPercent="yes"
            lay-filter="progressBar">
            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
        </div>
        <div class=" mt-2 mb-2" style="text-align: center97 ;"></div>
        <div class="row w-100"></div>
        <button type="button" class="layui-btn mt-2" id="upload"
            style="margin-left: 250px;margin-top: 20px;">开始上传</button>
    </div>
    <!-- 上传文件弹窗结束 -->

    <!-- 主体部分 -->
    <div class="content">
        <form class="layui-form">
            <blockquote class="layui-elem-quote quoteBox">
                <form class="layui-form" lay-filter="search">
                    <!-- 搜索框 -->
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="keyWord" id="searchInput" class="layui-input searchVal"
                                placeholder="请输入搜索的内容" />
                        </div>
                        <!-- 搜索按钮 -->
                        <a class="layui-btn search_btn" data-type="reload" id="search"><i
                                class="layui-icon layui-icon-search"></i>搜索</a>
                    </div>
                    <!-- <div class="layui-inline">
                        <a class="layui-btn layui-btn-normal" id="addTableDuty_btn"><i
                                class="layui-icon layui-icon-addition"></i>添加</a>
                    </div> -->
                    <!-- 上传文件按钮
                    <div class="layui-inline">
                        <button type="button" data-method="offset" data-type="auto" class="layui-btn layui-btn-normal"
                            id="shangchuan"><i class="layui-icon layui-icon-addition"></i>上传文件</button>
                    </div>
                         删除按钮 
                    <div class="layui-inline">
                        <a class="layui-btn layui-btn-danger layui-btn-normal" id="delete_Btn"><i
                                class="layui-icon layui-icon-delete"></i>删除</a>
                    </div> -->
                </form>
            </blockquote>
            <table id="demo" lay-filter="demo"></table>
            <!--操作-->
            <script type="text/html" id="newsListBar">
				<a class="layui-btn layui-btn-xs" lay-event="edit">查看文件</a>
			</script>
        </form>
        <script type="text/javascript" src="../layui/layui.js"></script>
        <script type="text/javascript" src="wenjianguanli.js"></script>
        <script type="text/javascript">
            var url = "http://47.105.118.98:9013";
            var obj;
            // layui.use(['table', "upload"], function () {
            //     table = layui.table;
            //     form = layui.form;
            //      ins1 = table.render(option);
            //    // 文件上传   导入
            // var upload = layui.upload;
            //执行实例
            // var uploadInst = upload.render({
            //     elem: '#shangchuan' //绑定元素
            //     ,
            //     accept: "file",
            //     url: url + '/document/upfile' //上传接口
            //     ,
            //     done: function (res) {
            //         layer.msg(res.msg)
            //     },
            //     error: function () {
            //         //请求异常回调

            //         layer.msg('上传失败');
            //     }
            // });
            //   })
            layui.use(['layer', 'form', 'laydate', 'jquery'], function () {
                var form = layui.form,
                    layer = layui.layer,
                    $ = layui.jquery,
                    laydate = layui.laydate,
                    table = layui.table;
                // $("#addTableDuty_btn").on('click', function () {
                //     layer.open({
                //         type: 1,
                //         title: '值班表信息添加',
                //         content: $('#addTableDuty'),
                //         area: ['421px', '260px']
                //     })
                // });
                //日期
                laydate.render({
                    elem: '#date',
                    trigger: 'click'
                });

                // 自定义验证规则
                form.verify({
                    caseDuty: function (value) {
                        if (value.length == '') {
                            return '案件值班为必填项！';
                        }
                    },
                    communityDuty: function (value) {
                        if (value.length == '') {
                            return '社区值班为必填项！';
                        }
                    },
                    workingDate: function (value) {
                        if (value.length == '') {
                            return '日期为必填项！';
                        }
                    }
                });
            })

        </script>

</body>

<!-- 点击添加按钮添加案例 -->
<!-- <form class="layui-form" style="display: none;" action="" style="margin-left:-60px;" id="addTableDuty"
    lay-filter="edit">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">日期</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="date" name="workingDate" placeholder="yyyy-MM-dd">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">文件名</label>
            <div class="layui-input-block"> -->
<!-- lay-verify用来自定义验证。 -->
<!-- <input type="text" name="caseDuty" lay-verify="caseDuty" autocomplete="off" placeholder="请输入案件值班内容"
                    class="layui-input">
            </div>
        </div>
    </div> -->
<!-- <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">社区值班</label>
            <div class="layui-input-block">
                <input type="text" name="communityDuty" lay-verify="communityDuty" autocomplete="off"
                    placeholder="请输入社区值班内容" class="layui-input">
            </div>
        </div>
    </div> -->
<!-- <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" type="button" lay-submit lay-filter="add">确认添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form> -->

<!-- 点击编辑 -->
<form class="layui-form" style="display: none;" action="" style="margin-left:-60px;" id="editTableDuty"
    lay-filter="edit">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">日期</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input editChangeDate" name="changeDate" id="changeDate"
                    placeholder="yyyy-MM-dd">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">文件</label>
            <div class="layui-input-block">
                <input type="password" class="layui-input editChangeDate" name="changeDate" id="changeDate"
                    placeholder="yyyy-MM-dd">
            </div>
        </div>
    </div>
    <!-- <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">案件值班</label>
            <div class="layui-input-block"> -->
    <!-- lay-verify用来自定义验证。 -->
    <!-- <input type="text" name="caseDuty" id="editCaseDuty" lay-verify="caseDuty" autocomplete="off"
                    placeholder="请重新编辑值班内容" class="layui-input">
            </div>
        </div>
    </div> -->


</form>